<template>
	<view class="content" :style="'background:#f7f7f7;'">
		<view class="luttery-top-info" :style="'background:#FFFFFF;'">
			<image class="luttery-info-image" :src="luttery_info.cover" mode=""></image>
			<view class="luttery-text">
				<block v-for="(item, index) in goods_list" :key='index'>
					<text class="text2 font30" :style="'color:#111111;'">{{item.sort}}等奖：{{item.name}}*{{item.num}}份</text>
				</block>
				<text class="text3 font28" :style="'color:#AEAEAE;'">{{luttery_info.open_time}}自动开奖</text>
			</view>
		</view>
		<view class="luttery-info-title" :style="'background:#FFFFFF;'">
			<view class="title-item1">
				<image src="../../../static/lottery-info-icon-title.png" mode=""></image>
				<text class="font30" :style="'color:#111111;'">{{luttery_info.diversion_name}}</text>
			</view>
			<view class="title-item2" :style="'background:#3786ED;'">
				<image src="../../../static/join-lottery.png" mode=""></image>
				<text class="font24" :style="'color:#FFFFFF;'">去了解</text>
			</view>
		</view>
		<view class="luttery-start-info-rule" :style="'background:#FFFFFF;'">
			<view class="rule-top-tab" :style="'border-bottom: 2upx solid #ebebeb;'">
				<block v-for="(item, index) in luttery_rule" :key="index">
					<view class="item-left" @click="changeLutteryRule(item.id)">
						<text :style="{color:(item.id == luttery_rule_id?'#E9564F;':'#000000;')}">{{item.name}}</text>
						<view v-if="item.id == luttery_rule_id" class="bottom-line" :style="'background:#E9564F;'"></view>
					</view>
				</block>
			</view>
			<rich-text v-if="luttery_rule_id == 2" class="rule-rich-text" :style="'color:#111111;'" :nodes="luttery_info.desc"></rich-text>
			<block v-if="luttery_rule_id == 1">
				<view class="get-prize-info">
					<text class="font48 fontw marginb30" :style="{color:'#E9564F;'}"></text>
					<text class="font30 marginb30" :style="{color:'#111111;'}">奖品：{{drawResult.goods_name}}</text>
					<view class="prize-btn-list">
						<view class="btn-item marginr" :style="{color:'#FFFFFF;',background:'#E9564F;'}">
							<text class="font30" style="margin-bottom: 37rpx;">{{drawResult.code}}</text>
							<text class="font30 fontw">点击复制</text>
						</view>
						<button class="btn-item" open-type="share" type="default">
							<image class="share-btn-bg-img" src="../../../static/open-prize-share-btn.png" mode=""></image>
						</button>
					</view>
				</view>
				<view class="open-info">
					<text class="font30" :style="{color:'#AEAEAE;'}">——  中奖者名单  ——</text>
					<block v-for="(item, index) in goods_list" :key='index'>
						<!-- <view class="No-1" :style="{background:'#F7F7F7;'}">
							<text class="font30" :style="{color:'#11111;','margin-bottom':'46rpx;'}">奖品：{{item[index].name}}</text>
							<image class="open-luttery-avatar" :src="item[index].avatar" mode=""></image>
							<text class="font28" :style="{color:'#111111;'}">{{item[index].nickname}}</text>
						</view> -->
						<view class="No-other" :style="{background:'#F7F7F7;'}">
							<text class="font30" :style="{color:'#111111;','margin-bottom':'56rpx;'}">奖品：{{item.name}}</text>
							<view class="No-other-avatar">
								<block v-for="(itemU, indexU) in goodslistUser[index]" :key="indexU">
									<view class="item">
										<image :src="itemU.avatar" mode=""></image>
										<text class="font28" :style="{color:'#111111;'}">{{itemU.nickname}}</text>
									</view>
								</block>
							</view>
							<view class="look-more" @click="goToOpenPrizeList(item)">
								<text class="font28" :style="{color:'#AEAEAE;'}">查看全部</text>
								<image src="../../../static/neck-bload.png" mode=""></image>
							</view>
						</view>
					</block>
				</view>
				<view class="join-number" @click="goToJoinUser">
					<text :style="'color:#111111;'">已有{{luttery_info.join_num}}人参与抽奖，<text :style="'color:#E9564F'">查看全部</text></text>
					<image class="red-next-image" src="../../../static/red_next.png" mode=""></image>
				</view>
				<view class="join-avatar-user">
					<block v-for="(item, index) in join_list" :key="index">
						<image class="join-avatar" :src="item.avatar" mode=""></image>
					</block>
				</view>
			</block>
		</view>
		<view class="ad-image">
			<image src="../../../static/ad-image.png" mode=""></image>
		</view>
		<view class="share-btn-index">
			<button class="share-btn" :style="'background:#FFFFFF;'" type="default" open-type="share">
				<image class="share-icon" src="../../../static/share-icon.png" mode=""></image>
				<text class="font30 fontw500">分享给好友</text>
			</button>
		</view>
		<view class="bottom-btn" :style="'background:#FFFFFF;'">
			<view class="btn" :style="'background:#E9564F;'">
				<text :style="'color:#FFFFFF;'">参与下一个抽奖</text>
			</view>
		</view>
		<uni-popup ref="noticePopup" type="center" :maskClick="false">
			<view class="publicpopup" :style="'background:#FFFFFF;'">
				<image class="closeAssistant" @click="$refs.noticePopup.close()" src="../../../static/close-popup2.png" mode=""></image>
				<view class="notice-index">
					<text class="new-user-top-text font36 fontw" :style="'color:#111111;'">
						开启中奖通知，不错过大奖！~
					</text>
					<image class="notice-image" src="../../../static/showjiaonang.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="openNoticePopup" type="center" :maskClick="false">
			<view class="publicpopup" :style="'background:#FFFFFF;'">
				<image class="closeAssistant" @click="$refs.openNoticePopup.close()" src="../../../static/close-popup2.png" mode=""></image>
				<view class="notice-index">
					<text class="new-user-top-text1 font36 fontw" :style="'color:#111111;'">
						温馨提示
					</text>
					<image class="notice-image1" src="../../../static/notice2.png" mode=""></image>
					<text class="font30 text-center notiec-text" :style="'color:#7c7c7c;'">
						建议开启【接受订阅消息】
						允许通知开奖结果，不错过中奖消息。
					</text>
				</view>
				<view class="public-btn" @click="notiecOpen">
					<image class="medium-btn-css" src="../../../static/medium-btn.png" mode=""></image>
					<text class="btn-text font34" :style="'color:#FFFFFF;'">去开启开奖通知</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="noticeSuccessPopup" type="center" :maskClick="false">
			<view class="publicpopup">
				<image class="closeAssistant close-btn" @click="$refs.noticeSuccessPopup.close()" src="../../../static/wite-close.png" mode=""></image>
				<image class="bgimgpublic bg-height" style="z-index: 0;" src="../../../static/join-success-bgimg.png" mode=""></image>
				<view class="notice-index">
					<view class="success-notice-top" :style="'color:#FFFFFF'">
						<image class="success-icon" src="../../../static/join-success-icon.png" mode=""></image>
						<text>参与成功</text>
					</view>
					<text class="font28 text-center notiec-text" :style="'color:#ffffff;'">
						开奖时间为02月20日 12：00
						请留意开奖通知，不要错过哦~
					</text>
					<view class="notice-btn-list">
						<button class="btn-item1 btn-item-margin" open-type="share" type="default">
							<image class="btn-item1-css" src="../../../static/small-btn.png" mode=""></image>
							<text class="btn-text font34" :style="'color:#FFFFFF;'">分享给好友</text>
						</button>
						<view class="btn-item1" :style="'border: 2rpx solid #E9564F;'" @click="$refs.noticeSuccessPopup.close()">
							<text class="btn-text font34" :style="'color:#E9564F;'">好的</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ucircleprogress from '../../../uview-ui/components/u-circle-progress/u-circle-progress.vue'
	var util = require('@/js/util.js')
	export default {
		components:{
			ucircleprogress
		},
		data() {
			return {
				percent:10,
				click_satrt_luttery:false,
				luttery_rule_text:`<p>本次奖品由【潘达抽奖】赞助提供
									【潘达抽奖】是一个专注爆款抽奖活动的小程序
									【用户福利】品牌方联合活动方送福利，每天都会上线几款品牌商品折扣品牌方联合活动方送福利，每天都会上线几款品牌商品折扣品牌方联合活动方送福利，每天都会上线几款品牌商品折扣品牌方联合活动方送福利！</p>`,
				start_key:'',
				help_rule_text:`<p style="line-height:48rpx">1 .参与抽奖即获得1张机会券；可通过邀请好友
				助力等方式提高中奖概率。
				2 .到达开奖状态时，系统自动从全部已产生的机
				会券中随机抽取中奖的机会券，每张券的机会均
				等。
				3 .中奖概率计算：（已获得机会券的数量+当前
				抽奖全部机会券）X100%。获得的机会券越多，
				中奖概率越高。</p>`,
				luttery_rule_id:1,
				luttery_rule:[
					{
						id:1,
						name:'抽奖说明'
					},
					{
						id:2,
						name:'图文介绍'
					}
				],
				luttery_id:'',
				luttery_info:'',
				goods_list:[],
				drawResult:null,
				next_id:'',
				pre_id:'',
				goodslistUser:[],
				join_list:''
			};
		},
		onShow() {
			// this.$refs.openNoticePopup.open()
		},
		onShareAppMessage() { // 分享 buttom share
			return {
				title: '抽奖助手',
				path: '/pages/index/index?parent_id='+uni.getStorageSync('member_id')+'&prizedraw_id='+this.luttery_id
			}
		},
		onLoad(e) {
			this.luttery_id = e.id
			console.log(this.luttery_id)
			this.getLutteryInfo()
		},
		methods:{
			getLutteryInfo(){
				let _self = this
				clearInterval(_self.lookVideo_interval)
				uni.request({
					url: util.getUrl("prizedraw/info"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						prizedraw_id:_self.luttery_id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.luttery_info = res.data.data.info
							_self.goods_list = res.data.data.goods
							_self.join_list = res.data.data.join_list
							_self.drawResult = res.data.data.drawResult
							_self.next_id = res.data.data.next_id
							_self.pre_id = res.data.data.pre_id
							setTimeout(()=>{
								for(let key in _self.goods_list){
									_self.getJoinGiftList(key,_self.goods_list[key])
								}
							},300)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
							if(res.data.code == 500){
								uni.navigateTo({
									url:'../../../pages/login/login'
								})
							}
						}
					},
				});
			},
			getJoinGiftList(key,item){
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/winnerList"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						prizedraw_id:_self.luttery_id,
						goods_id:item.id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.goodslistUser.push(res.data.data)
							console.log(_self.goodslistUser)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
							if(res.data.code == 500){
								uni.navigateTo({
									url:'../../../pages/login/login'
								})
							}
						}
					},
				});
			},
			goToOpenPrizeList(item){
				uni.navigateTo({
					url:'openPrizeUserList?id='+this.luttery_id+'&goods_id='+item.id
				})
			},
			changeLutteryRule(id){
				this.luttery_rule_id = id
			},
			goToPoster(){
				this.$refs.joinFriendPopup.close()
				uni.navigateTo({
					url:'posterInfo'
				})
			},
			startJoinFriend(){
				this.$refs.joinFriendPopup.open()
			},
			startLuttery(){
				this.click_satrt_luttery = !this.click_satrt_luttery
			},
			startJoinLuttery(){
				if(this.start_key == ''){
					this.$refs.keyStartPopup.close()
					this.$refs.keyFileStartPopup.open()
				}else{
					this.$refs.keyStartPopup.close()
				}
			},
			againInput(){
				this.$refs.keyFileStartPopup.close()
				this.$refs.keyStartPopup.open()
			},
			inputStartKey(e){
				this.start_key = e.detail.value
			},
			goToJoinUser(){
				uni.navigateTo({
					url:'joinUser'
				})
			},
			notiecOpen(){
				this.$refs.openNoticePopup.close()
				this.$refs.noticeSuccessPopup.open()
			},
		}
	}
</script>

<style lang="scss">
	.luttery-ing{
		width: 690upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		margin-top: 31upx;
		.bottom-share{
			width: 545upx;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			margin-top: 56upx;
			.bottom-share-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 240upx;
				height: 60upx;
				border-radius: 20upx;
				border: 2upx solid #FFFFFF;
				background-color: rgba(0,0,0,0);
				padding: 0;
				margin: 0;
				&::after{
					border: none;
					background: none;
				}
			}
		}
		.start-luttery-ing{
			width: 630upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20upx;
			z-index: 1;
		}
		.text-enter-ing{
			margin-bottom: 29upx;
			margin-top: 76upx;
			z-index: 1;
		}
		.luttery-top-ing{
			margin-top: 84upx;
			width: 556upx;
			height: 104upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30upx;
			z-index: 1;
		}
		.ing-bg-img{
			width: 100%;
			height: 471upx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
	}
	.friend-task-index{
		display: flex;
		align-items: center;
		width: 750upx;
		z-index: 1;
		flex-direction: column;
		padding: 0 30upx 30upx 30upx;
		.task-list{
			display: flex;
			flex-direction: column;
			.task-item{
				display: flex;
				flex-direction: column;
				margin-bottom: 40upx;
				.text-name{
					margin-bottom: 20upx;
				}
				.text-info{
					margin-bottom: 29upx;
				}
				.item-btn{
					width: 689upx;
					height: 93upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10upx;
					border: 2upx solid #E9564F;
					.lookad-icon{
						width: 35upx;
						height: 35upx;
						margin-right: 20upx;
					}
				}
			}
		}
		.share-list{
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 30upx;
			margin-bottom: 41upx;
			.item-btn-1{
				width: 330upx;
				height: 93upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10upx;
				border: 2upx solid #E9564F;
				&::after{
					border: none;
					background: none;
				}
				.down-load{
					width: 25upx;
					height: 28upx;
					margin-right: 19upx;
				}
				.wx-icon-share{
					width: 42upx;
					height: 35upx;
					margin-right: 20upx;
				}
			}
			.left-btn{
				margin-right: 29upx;
			}
		}
		.task-top-center{
			display: flex;
			flex-direction: column;
			width: 100%;
			.text1{
				margin-bottom: 19upx;
			}
		}
		.top-tip{
			width: 750upx;
			border-radius: 20upx 20upx 0px 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			height:94upx;
			margin-bottom: 30upx;
		}
	}
	.publicbottompopup{
		display: flex;
		width: 750upx;
		align-items: center;
		flex-direction: column;
		position: relative;
		border-radius: 20upx 20upx 0 0 ;
		.close-popup{
			width: 31upx;
			height: 31upx;
			top: 30upx;
			right: 30upx;
			z-index: 3;
			position: absolute;
		}
	}
	.luck-list-popup{
		display: flex;
		width: 100%;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 96upx;
		z-index: 1;
		padding: 96upx 28upx 28upx 28upx;
		.top-tip-title1{
			margin-bottom: 136upx;
		}
		.luck-list-item{
			width: 630upx;
			height: 80upx;
			margin-bottom: 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			box-sizing: border-box;
			border-radius: 20upx;
		}
	}
	.help-rule-popup{
		display: flex;
		width: 100%;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 96upx;
		z-index: 1;
		padding: 96upx 34upx 52upx 34upx;
		.top-tip-title{
			margin-bottom: 145upx;
		}
	}
	.friend-text{
		margin-top: 30upx;
	}
	.continue-help{
		display: flex;
		align-items: center;
		margin-top: 40upx;
		.item-1{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 270upx;
			height: 80upx;
			border-radius: 20upx;
			font-size: 30upx;
			border: 2upx solid #AEAEAE;
		}
	}
	.start-luttery-index{
		width: 100%;
		z-index: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 50upx;
		z-index: 1;
		.input-key{
			width: 630upx;
			height: 80upx;
			text-align: center;
			border-radius: 20upx;
			margin-bottom: 38upx;
		}
		.file-key-image-css{
			width: 149upx;
			height: 266upx;
			margin-bottom: 61upx;
		}
		.get-opportunity-file{
			margin-bottom: 116upx;
		}
		.get-opportunity{
			display: flex;
			align-items: center;
			margin-bottom: 126upx;
			image{
				width: 16upx;
				height: 27upx;
				margin-left: 15upx;
			}
		}
		.start-top-text{
			margin-bottom: 30upx;
		}
		.notice-btn-list{
			display: flex;
			align-items: center;
			margin-bottom: 50upx;
			.btn-item-margin{
				margin-right: 30upx;
				font-weight: 300;
			}
			.btn-item1{
				width: 300upx;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				border-radius: 20upx;
				z-index: 1;
				.btn-item1-css{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 0;
				}
				.btn-text{
					z-index: 1;
				}
			}
		}
	}
	.file-luttery{
		text-align: center;
		margin: 41upx 0 39upx 0;
		line-height: 48upx;
	}
	.notice-index{
		width: 100%;
		padding: 30upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 1;
		.success-notice-top{
			display: flex;
			align-items: center;
			font-size: 36upx;
			font-weight: bold;
			margin-bottom: 47upx;
			margin-top: 78upx;
			.success-icon{
				width: 40upx;
				height: 40upx;
				margin-right: 20upx;
			}
		}
		.notice-btn-list{
			display: flex;
			align-items: center;
			margin-top: 167upx;
			.btn-item-margin{
				margin-right: 30upx;
				padding: 0;
				font-weight: 300;
				&::after{
					background: none;
					border: none;
				}
			}
			.btn-item1{
				width: 300upx;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				border-radius: 20upx;
				z-index: 1;
				.btn-item1-css{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 0;
				}
				.btn-text{
					z-index: 1;
				}
			}
		}
		.notiec-text{
			line-height: 40upx;
		}
		.new-user-top-text{
			margin-top: 41upx;
		}
		.notice-image1{
			width: 616upx;
			height: 397upx;
			margin-top: 13upx;
			margin-bottom: 49upx;
		}
		.notice-image{
			width: 630upx;
			height: 387upx;
			margin-top: 39upx;
		}
	}
	.publicpopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690upx;
		box-sizing: border-box;
		position: relative;
		border-radius: 18upx;
		background: #FFFFFF;
		.popuptopimge{
			width: 361upx;
			height: 208upx;
			position: absolute;
			top: -135upx;
			z-index: 1;
		}
		.bg-height{
			height: 554upx;
		}
		.close-btn{
			z-index: 3;
			right: 75upx !important;
			top: 37upx !important;
		}
		.closeAssistant{
			width: 31upx;
			height: 31upx;
			position: absolute;
			top: 24upx;
			right: 24upx;
			z-index: 3;
		}
		.public-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 410upx;
			height: 80upx;
			position: relative;
			margin-bottom: 40upx;
			.medium-btn-css{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
			}
			.btn-text{
				z-index: 1;
			}
		}
	}
	.bottom-btn{
		display: flex;
		padding: 30upx;
		width: 750upx;
		justify-content: center;
		box-sizing: border-box;
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690upx;
			height: 80upx;
			font-size: 36upx;
			border-radius: 20upx;
		}
	}
	.share-btn-index{
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		margin-bottom: 30upx;
		.share-btn{
			display: flex;
			align-items: center;
			width: 256upx;
			height: 70upx;
			justify-content: center;
			box-shadow: 0px 3upx 7upx 0px rgba(0, 0, 0, 0.1);
			border: 1upx solid #EBEBEB;
			border-radius: 35upx;
			margin-bottom: 37upx;
			margin: 0;
			padding: 0;
			&::after{
				background: none;
				border: none;
			}
			.share-icon{
				width: 34upx;
				height: 33upx;
				margin-right: 15upx;
			}
		}
	}
	
	.ad-image{
		width: 690upx;
		height: 190upx;
		margin-top: 30upx;
		margin-bottom: 38upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.upmove-join-luttery{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200upx;
		height: 80upx;
		position: absolute;
		top: 50%;
		z-index: 98;
		border-radius: 20upx;
		image{
			width: 77upx;
			height: 73upx;
			position: absolute;
			bottom: 0;
			right: -42upx;
		}
	}
	.join-avatar-user{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 30upx;
		.join-avatar{
			width: 60upx;
			height: 60upx;
			border-radius: 8upx;
			margin-right: 10upx;
		}
	}
	.join-number{
		display: flex;
		align-items: center;
		font-size: 30upx;
		margin-bottom: 29upx;
		justify-content: center;
		.red-next-image{
			width: 16upx;
			height: 27upx;
			margin-left: 10upx;
		}
	}
	.start-luttery-click{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 40upx;
		height: 260upx;
		width: 100%;
		.look-video-top-tip{
			width: 351upx;
			height: 101upx;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			top: -92upx;
			.top-tip-text{
				margin-bottom: 22upx;
				z-index: 1;
			}
			image{
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 0;
				top: 0;
				left: 0;
			}
		}
		.start-line{
			width: 175upx;
			height: 2upx;
			position: absolute;
			left: 44upx;
		}
		.look-ad-video{
			height: 224upx;
			width: 224upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			border-radius: 50%;
			.text-time{
				position: absolute;
				bottom: 29upx;
			}
		}
		.start-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			height: 260upx;
			width: 260upx;
			.start-tip{
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 0;
				right: -211upx;
				z-index: 1;
				.left-image{
					width: 60upx;
					height: 63upx;
					margin-left: 4upx;
				}
				.tip-text{
					display: flex;
					align-items: center;
					width: 226upx;
					height: 91upx;
					position: relative;
					z-index: 1;
					.tip-text-text{
						z-index: 1;
						margin-left: 31upx;
					}
					.tip-text-bgimg{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 0;
					}
				}
			}
		}
		
		.start-text{
			font-size: 48upx;
			font-weight: 800;
			z-index: 1;
		}
		.start-image-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 0;
		}
		
	}
	.marginb30{
		margin-bottom: 30upx;
	}
	.luttery-start-info-rule{
		display: flex;
		flex-direction: column;
		width: 690upx;
		border-radius: 20upx;
		
		.get-prize-info{
			display: flex;
			align-items: center;
			flex-direction: column;
			.prize-btn-list{
				display: flex;
				align-items: center;
				.btn-item{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 300upx;
					height: 164upx;
					border-radius: 20upx;
					background-color: rgba(0,0,0,0);
					padding: 0;
					&::after{
						border: none;
						background: none;
					}
					.share-btn-bg-img{
						width: 100%;
						height: 100%;
					}
				}
				.marginr{
					margin-right: 30upx;
				}
			}
		}
		.open-info{
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 30upx;
			margin-bottom: 30upx;
			.No-other{
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 630upx;
				box-sizing: border-box;
				padding: 25upx 50upx 42upx 50upx;
				border-radius: 12upx;
				margin-top: 30upx;
				.look-more{
					display: flex;
					align-items: center;
					margin-top: 10upx;
					image{
						width: 16upx;
						height: 28upx;
						margin-left: 15upx;
					}
				}
				.No-other-avatar{
					display: flex;
					width: 100%;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					.item{
						display: flex;
						align-items: center;
						flex-direction: column;
						margin-bottom: 31upx;
						margin-left: 20upx;
						margin-right: 20upx;
						image{
							width: 80upx;
							height: 80upx;
							margin-bottom: 20upx;
							border-radius: 50%;
						}
					}
				}
			}
			.No-1{
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 630upx;
				box-sizing: border-box;
				padding: 26upx 0 31upx 0;
				border-radius: 12upx;
				margin-top: 30upx;
				margin-bottom: 30upx;
				.open-luttery-avatar{
					width: 80upx;
					height: 80upx;
					margin-bottom: 20upx;
					border-radius: 50%;
				}
				
			}
		}
		.rule-rich-text{
			margin: 30upx;
		}
		.rule-top-tab{
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-bottom: 2upx solid #EBEBEB;
			height: 93upx;
			.item-left{
				display: flex;
				justify-content: center;
				width: 200upx;
				text-align: center;
				font-size: 34upx;
				position: relative;
				.bottom-line{
					width: 74upx;
					height: 4upx;
					position: absolute;
					bottom: -28upx;
				}
			}
		}
	}
	.luttery-info-title{
		width: 690upx;
		padding: 27upx 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30upx;
		border-radius: 20upx;
		margin-bottom: 30upx;
		.title-item1{
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 34upx;
				height: 34upx;
				margin-right: 10upx;
			}
		}
		.title-item2{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 131upx;
			height: 40upx;
			border-radius: 4upx;
			image {
				width: 28upx;
				height: 23upx;
				margin-right: 10upx;
			}
		}
	}
	.luttery-top-info{
		width: 690upx;
		box-sizing: border-box;
		padding: 0 0 30upx 0;
		border-radius: 20upx;
		.luttery-info-image{
			width: 690upx;
			height: 300upx;
			border-radius: 20upx 20upx 0 0 ;
			margin-bottom: 30upx;
		}
		.luttery-text{
			margin-left: 35upx;
			display: flex;
			flex-direction: column;
			.text1{
				font-size: 30upx;
				line-height: 40upx;
			}
			.text2{
				line-height: 40upx;
				margin-bottom: 29upx;
			}
			.text3{
				
			}
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		width: 750upx;
		min-height: 100vh;
		padding: 30upx 30upx 0 30upx;
		box-sizing: border-box;
		position: relative;
		align-items: center;
		font-family: PingFang SC;
	}
</style>
